<template>
  <div class="music-home">
    <div class="music-player">
      <audio
        ref="audioPlayer"
        :src="audioUrl"
        @timeupdate="onTimeUpdate"
        @loadedmetadata="onLoadedMetadata"
        @ended="onEnded"
        @error="onError"
        @play="onPlay"
        @pause="onPause"
      ></audio>

      <div class="player-controls">
        <div class="song-info">
          <h3>{{ currentSong.title }}</h3>
          <p>{{ currentSong.artist }}</p>
        </div>

        <div class="progress-bar">
          <input
            type="range"
            :value="currentTime"
            :max="duration"
            @input="onProgressChange"
          />
          <span
            >{{ formatTime(currentTime) }} / {{ formatTime(duration) }}</span
          >
        </div>

        <div class="controls">
          <button @click="togglePlay">
            {{ isPlaying ? "暂停" : "播放" }}
          </button>
          <input
            type="range"
            v-model="volume"
            min="0"
            max="1"
            step="0.1"
            @input="onVolumeChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MusicHome",
  data() {
    return {
      audioUrl:
        "https://guangli-leather.oss-cn-beijing.aliyuncs.com/%E6%83%85%E6%AD%8C-%E6%B1%AA%E8%8B%8F%E6%B3%B7.mp3", // OSS音频文件URL
      currentTime: 0,
      duration: 0,
      isPlaying: false,
      volume: 1,
      currentSong: {
        title: "",
        artist: "",
      },
    };
  },
  methods: {
    // 播放音乐示例
    playSong(ossUrl, songInfo = { title: "歌曲名称", artist: "艺术家" }) {
      this.audioUrl = ossUrl;
      this.currentSong = songInfo;
      this.$refs.audioPlayer.load();
    },

    // 播放控制
    togglePlay() {
      if (this.isPlaying) {
        this.$refs.audioPlayer.pause();
      } else {
        this.$refs.audioPlayer.play();
      }
    },

    // 音量控制
    onVolumeChange() {
      this.$refs.audioPlayer.volume = this.volume;
    },

    // 进度条控制
    onProgressChange(event) {
      const time = event.target.value;
      this.$refs.audioPlayer.currentTime = time;
    },

    // 事件处理器
    onTimeUpdate() {
      this.currentTime = this.$refs.audioPlayer.currentTime;
    },

    onLoadedMetadata() {
      this.duration = this.$refs.audioPlayer.duration;
    },

    onEnded() {
      this.isPlaying = false;
      console.log("歌曲播放结束");
    },

    onError(e) {
      console.error("音频播放错误:", e);
    },

    onPlay() {
      this.isPlaying = true;
    },

    onPause() {
      this.isPlaying = false;
    },

    // 时间格式化
    formatTime(seconds) {
      const mins = Math.floor(seconds / 60);
      const secs = Math.floor(seconds % 60);
      return `${mins}:${secs.toString().padStart(2, "0")}`;
    },
  },
};
</script>

<style scoped>
.music-player {
  padding: 20px;
  border-radius: 8px;
  background: #f5f5f5;
}

.player-controls {
  margin-top: 15px;
}

.progress-bar {
  margin: 15px 0;
}

.progress-bar input[type="range"] {
  width: 100%;
}

.controls {
  display: flex;
  align-items: center;
  gap: 15px;
}
</style>
